<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>{{name}}</div>
    </div>
</body>
<script>
    const data = {};
    //    实现一个响应性系统，核心《如何监听数据的变化》
    //   定义对象的行为
    Object.defineProperty(data, 'name', {
        //    value: 'tom',
        //    writable: true, // 是否可用被修改
        //    configurable: true, // 属性是否可被删除
        get() {
            return this.value;
        },
        set(value) {
            this.value = value;
            //    获取DOM元素
            const originDom = document.querySelector('#app').innerHTML;
            const result = originDom.replace('{{name}}', value);
            document.querySelector('#app').innerHTML = result;
        }
    })

    // writable 属性，表示对象是否可被重新赋值，默认情况下是false值
    //    user.name = 'jake'
    //    console.log(user.name)

    //    delete user.name;
    //    console.log(user)
    data.name = 'tom'
    console.log(data.name)

</script>

</html>